<div class="pm-check-container">



    <div class="right">

        <nz-card [nzBordered]="false">
            <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
                <nz-form-item>
                    <nz-form-label>时间</nz-form-label>
                    <nz-form-control>
                        <nz-range-picker formControlName="rangePickerTime" [nzAllowClear]="false"
                            [nzPlaceHolder]="['起始日期', '截止日期']"></nz-range-picker>
                    </nz-form-control>

                </nz-form-item>
                <nz-form-item>
                    <nz-form-label>关键字</nz-form-label>
                    <nz-form-control>
                        <input type="text" nz-input formControlName="keywords">
                    </nz-form-control>
                </nz-form-item>

                <nz-form-item>
                    <nz-form-control>
                        <button nz-button nzType="primary" (click)="queryInfo(true)"><i nz-icon nzType="search"></i>查询
                        </button>
                        <button nz-button nzType="primary" (click)="openEditModal()" style="margin-left: 10px">新增
                        </button>
                    </nz-form-control>
                </nz-form-item>

            </form>

            <div class="table-wrap">
                <nz-table #dataTable nzSize="small" [nzTotal]="total" [nzFrontPagination]="false"
                    [(nzPageIndex)]="pageNum" [(nzPageSize)]="pageSize" [nzLoading]="loading"
                    (nzPageIndexChange)="queryInfo()" [nzData]="tableData">
                    <thead>
                        <tr>
                            <!--<th nzShowExpand></th>-->
                            <th>开始时间</th>
                            <th>状态</th>
                            <th>任务名</th>
                            <th>巡检人</th>
                            <th>结果</th>
                            <th>巡检图片</th>
                            <th>巡检视频</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-template ngFor let-data [ngForOf]="dataTable.data">
                            <tr>
                                <td>{{ data.begindate }}</td>
                                <td>
                                    <div *ngIf="data.state==='0'">未开始</div>
                                    <div *ngIf="data.state==='1'">执行中</div>
                                    <div *ngIf="data.state==='2'">待审核</div>
                                    <div *ngIf="data.state==='3'">已完成</div>
                                </td>

                                <td>{{ data.taskname }}</td>
                                <td>{{ staffMapper[data.staffid] }}</td>
                                <td>
                                    <div *ngIf="data.resultstate==='1'">正常</div>
                                    <div *ngIf="data.resultstate==='2'">异常</div>
                                </td>
                                <td>
                                    <a (click)="toView(data,'typeImg')">预览图片</a>

                                </td>
                                <td>
                                    <a (click)="toView(data,'typeVideo')">预览视频</a>

                                </td>
                                <td>
                                    <a (click)="openEditModal(data)">编辑</a>
                                    <nz-divider nzType="vertical"></nz-divider>
                                    <a nz-popconfirm nzPopconfirmTitle="确认删除？" nzPopconfirmPlacement="left"
                                        (nzOnConfirm)="onDelete(data.taskid)">
                                        删除
                                    </a>
                                </td>
                            </tr>
                            <tr [nzExpand]="true"
                                [ngClass]="{'green': data.resultstate === '1', 'red': data.resultstate === '2'}">
                                <td colspan="8">巡检结果： {{ data.result }}</td>
                            </tr>
                        </ng-template>
                    </tbody>
                </nz-table>
            </div>
        </nz-card>
    </div>


    <nz-modal nzClassName="custom-modal" nzWidth="760" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
        (nzOnCancel)="onCancel()" (nzOnOk)="onConfirm()">
        <form nz-form [formGroup]="checkForm">
            <div nz-row [nzGutter]="24">
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">巡检对象</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input type="text" nz-input formControlName="objid">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">任务名称</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="taskname" placeholder="任务名称">
                        </nz-form-control>
                    </nz-form-item>
                </div>


                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">任务描述</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="taskdesc" placeholder="任务描述">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">执行人员</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input type="text" nz-input formControlName="staffid">

                        </nz-form-control>
                    </nz-form-item>
                </div>

                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">开始时间</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <nz-date-picker formControlName="begindate" nzShowTime nzFormat="yyyy-MM-dd"
                                nzPlaceHolder="开始时间"></nz-date-picker>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">结束时间</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <nz-date-picker formControlName="enddate" nzShowTime nzFormat="yyyy-MM-dd"
                                nzPlaceHolder="结束时间"></nz-date-picker>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">任务状态</nz-form-label>
                        <nz-form-control [nzSpan]="16">

                            <nz-select formControlName="state" nzPlaceHolder="任务状态">-->
                                <nz-option nzLabel="未开始" nzValue="0"></nz-option>
                                <nz-option nzLabel="执行中" nzValue="1"></nz-option>
                                <nz-option nzLabel="待审核" nzValue="2"></nz-option>
                                <nz-option nzLabel="已完成" nzValue="3"></nz-option>
                            </nz-select>

                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">巡检结果状态</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <nz-select formControlName="resultstate" nzPlaceHolder="巡检结果状态">-->
                                <nz-option nzLabel="正常" nzValue="1"></nz-option>
                                <nz-option nzLabel="异常" nzValue="2"></nz-option>
                            </nz-select>
                            <!-- <input type="text" nz-input formControlName="resultstate"> -->

                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="24">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="3">巡检结果</nz-form-label>
                        <nz-form-control [nzSpan]="20">
                            <textarea formControlName="result" nz-input rows="2"></textarea>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="24">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="3">上传图片</nz-form-label>
                        <nz-form-control [nzSpan]="20">
                            <nz-upload nzType="drag" [nzMultiple]="true" [(nzFileList)]="fileList"
                                [nzDisabled]="fileUploadDisabled" (nzChange)="handleChange($event)"
                                [nzAction]="uploadUrl">
                                <p class="ant-upload-drag-icon">
                                    <i nz-icon nzType="inbox"></i>
                                </p>
                                <p class="ant-upload-text">巡检图片上传</p>
                            </nz-upload>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="24">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="3">上传视频</nz-form-label>
                        <nz-form-control [nzSpan]="20">
                            <nz-upload nzType="drag" [nzMultiple]="true" [(nzFileList)]="fileListVideo"
                                [nzDisabled]="fileUploadDisabledVideo" (nzChange)="handleChangeVideo($event)"
                                [nzAction]="uploadUrlVideo">
                                <p class="ant-upload-drag-icon">
                                    <i nz-icon nzType="inbox"></i>
                                </p>
                                <p class="ant-upload-text">巡检视频上传</p>
                            </nz-upload>
                        </nz-form-control>
                    </nz-form-item>
                </div>

            </div>
        </form>
    </nz-modal>

    <nz-modal nzClassName="custom-modal-active" nzWidth="760" [(nzVisible)]="modalShowView"    
        (nzOnCancel)="onCancelView()" (nzOnOk)="onConfirmView()">
        <div *ngIf="showType==='typeImg'" style="display: flex;justify-content: center;align-items: center;">
            <img src="{{imgSrc}}"  max-width="680" height="540" alt="">
            <div *ngIf="imgSrc===''">暂无图片</div>
        </div>
        <div *ngIf="showType==='typeVideo'" style="display: flex;justify-content: center;align-items: center;">
            <!-- <video width="680" height="540" controls>
                <source src="{{videoSrc}}" type="video/mp4">
              </video> -->
              <video width="680" height="540" controls>
                <source src="{{videoSrc}}" type="video/mp4">
                <source src="{{videoSrc}}" type="video/ogg">
                <div *ngIf="videoSrc===''">暂无图片</div>

              </video>
        </div>
    </nz-modal>

</div>